<template>
  <view class="page">
    <u-sticky bgColor="#fff">
      <Tabs
        :list="tabList"
        @click="handleTab"
        :current="current"
        :scrollable="false"
        lineWidth="50"
      />
    </u-sticky>
    <swiper
      :current="current"
      style="height: calc(100vh - 176rpx)"
      duration="300"
      @change="changeTab"
    >
      <swiper-item class="tab-content" v-for="(item, index) in tabList" :key="index">
        <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
          <u-empty
            v-if="item.loaded && item.cardList.length === 0"
            :icon="webSrc('/assets/web_img/empty.png')"
            width="162"
            height="162"
            text="暂无优惠券"
            textColor="#bababa"
          />
          <view
            v-for="(coupon, seat) in item.cardList"
            :key="seat"
            :class="coupon.type"
            class="coupon-item"
          >
            <view v-if="coupon.state" class="coupon-sign">
              <u-image
                show-loading
                :src="require('@/static/my/receive.png')"
                width="114rpx"
                height="114rpx"
              />
            </view>
            <view class="item-left">
              <block
                v-if="
                  coupon.type == 'reduction' ||
                  (coupon.type == 'vip' && coupon.usertype == 'reduction')
                "
              >
                <view class="colour" :style="{ color: item.color }">
                  <text class="text-price"></text>
                  <text class="price">{{ Number(coupon.price) }}</text>
                </view>
                <view class="cu-tag">
                  满{{ Number(coupon.limit) || 0 }}减{{ Number(coupon.price) || 0 }}
                </view>
              </block>
              <block
                v-if="
                  coupon.type == 'discount' ||
                  (coupon.type == 'vip' && coupon.usertype == 'discount')
                "
              >
                <view class="colour" :style="{ color: item.color }">
                  <text class="price">{{ Number(coupon.discount) || 0 }}</text>
                  <text class="discount">折</text>
                </view>
                <view class="cu-tag">
                  满{{ Number(coupon.limit) || 0 }}打{{ Number(coupon.discount) || 0 }}折
                </view>
              </block>
              <block v-if="coupon.type == 'shipping'">
                <view class="colour" :style="{ color: item.color }">
                  <text class="price">包邮</text>
                </view>
                <view class="cu-tag"> 满{{ Number(coupon.limit) || 0 }}元包邮 </view>
              </block>
            </view>
            <view class="item-right">
              <view class="shop" @click="onShop(coupon.shop_id)">
                <view class="name">
                  {{ coupon.shop.shopname || "店铺名称" }}
                </view>
                <view>
                  <u-icon name="arrow-right" color="#222" size="28rpx" />
                </view>
              </view>
              <view class="title">
                <view
                  class="cu-tag tagstyle"
                  :style="{
                    backgroundColor: item.undertint,
                    color: item.color,
                  }"
                >
                  {{ coupon.type_text }}
                </view>
                <text class="text-cut">{{ coupon.name || "-" }}</text>
              </view>
              <view class="text-content">
                <view class="text-gray">
                  <view v-if="coupon.grant != '-1'">
                    <view class="dot"></view>目前仅剩余 {{ coupon.surplus || 0 }} 张
                  </view>

                  <view v-if="coupon.drawlimit != 0">
                    <view class="dot"></view>每人仅限领取 {{ coupon.drawlimit || 0 }} 张
                  </view>
                  <block v-if="coupon.pretype == 'fixed'">
                    <view>
                      <view class="dot"></view>生效 {{ coupon.startdate || "-" }}
                    </view>
                    <view>
                      <view class="dot"></view>结束 {{ coupon.enddate || "-" }}
                    </view>
                  </block>
                  <block v-if="coupon.pretype == 'appoint'">
                    <view v-if="coupon.validity == 0">
                      <view class="dot"></view>未使用前 永久 有效
                    </view>
                    <view v-else>
                      <view class="dot"></view>领取后 {{ coupon.validity || "-" }} 天有效
                    </view>
                  </block>
                </view>
                <view
                  class="cu-btn"
                  :style="{
                    color: item.color,
                    border: '1rpx solid ' + item.color,
                    backgroundColor: '#fff',
                  }"
                  @click.stop="onApply(coupon.id)"
                  v-if="coupon.state"
                >
                  立即使用
                </view>
                <view
                  v-else
                  class="cu-btn"
                  :style="{
                    color: '#fff',
                    border: '1rpx solid ' + item.color,
                    backgroundColor: item.color,
                  }"
                  @click.stop="onReceive(index, seat)"
                >
                  立即领取
                </view>
              </view>
            </view>
          </view>
          <u-loadmore
            v-if="item.loaded && item.cardList.length"
            :status="item.loadStutas"
          />
          <view class="edgeInsetBottom"></view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import Tabs from "@/components/Tabs/index";

import { myCouponCard, myCouponReceive } from "@/request/myApi.js";
export default {
  components: { Tabs },
  data() {
    return {
      current: 0,
      tabList: [
        {
          type: "reduction",
          name: "满减券",
          loadStutas: "loadmore",
          current_page: 1,
          cardList: [],
          color: "#ff4f00",
          undertint: "#fff0e6",
        },
        {
          type: "discount",
          name: "折扣券",
          loadStutas: "loadmore",
          current_page: 1,
          cardList: [],
          color: "#39B54A",
          undertint: "#E9FFEC",
        },
        {
          type: "shipping",
          name: "包邮券",
          loadStutas: "loadmore",
          current_page: 1,
          cardList: [],
          color: "#0081FF",
          undertint: "#E1F0FF",
        },
      ],
    };
  },
  onLoad() {
    this.loadData();
  },
  methods: {
    // 页签切换
    handleTab(e) {
      this.current = e.index;
    },
    // swiper切换
    changeTab(e) {
      this.current = e.target.current;
      this.loadData("tabChange");
    },
    //顶部tab点击
    tabClick(index) {
      this.current = index;
    },
    //获取订单列表
    loadData(source) {
      //这里是将订单挂载到tab列表下
      let index = this.current;
      let navItem = this.tabList[index];
      let type = navItem.type;
      //判断是否最后一页
      if (navItem.loadStutas == "nomore") {
        return;
      }
      //tab切换只有第一次需要加载数据
      if (source === "tabChange" && navItem.loaded === true) {
        return;
      }
      //防止重复加载
      if (navItem.loadStutas === "loading") {
        return;
      }
      navItem.loadStutas = "loading";
      // 获取列表
      myCouponCard({
        type: type,
        page: navItem.current_page,
      }).then((res) => {
        if (res.code == 1) {
          navItem.current_page = res.data.current_page; //当前页码
          if (res.data.last_page == res.data.current_page) {
            navItem.loadStutas = "nomore";
          } else {
            navItem.loadStutas = "loadmore";
            navItem.current_page++;
          }
          let cardList = res.data.data.filter((item) => {
            item = Object.assign(item, {
              state: false,
            });
            return item.type === type;
          });
          cardList.forEach((item) => {
            navItem.cardList.push(item);
          });
          //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
          this.$set(navItem, "loaded", true);
        }
      });
    },
    // 领取优惠券
    onReceive(key, seat) {
      let coupon = this.tabList[key].cardList[seat];
      myCouponReceive({
        id: coupon.id,
      }).then((res) => {
        if (res.code == 1) {
          coupon.id = res.data.id;
          coupon.state = true;
          uni.showToast({
            title: res.data.msg,
            icon: "none",
          });
        }
      });
    },
    onApply(id) {
      // this.$wanlshop.to(`/pages/user/coupon/apply?id=${id}&state=true`);
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  height: calc(100vh - 88rpx);
  background-color: #f7f7f7;
  font-size: 28rpx;
  color: #222222;
  .coupon-item {
    height: 218rpx;
    position: relative;
    overflow: hidden;
    display: flex;
    background-image: url("@/static/my/bg_coupon.png");
    background-size: 100% 100%;
    margin: 20rpx;
    .item-left {
      width: 226rpx;
      height: 218rpx;
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      flex-shrink: 0;
      .colour {
        .text-price::before {
          content: "¥";
          font-size: 80%;
          margin-right: 4rpx;
        }
        .price {
          font-size: 54rpx;
          font-weight: bold;
        }
      }
    }
    .item-right {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      height: 218rpx;
      padding: 26rpx;
      z-index: 2;
      overflow: hidden;
      align-content: space-between;
      box-sizing: border-box;
      .shop {
        display: flex;
        width: 100%;
        justify-content: space-between;
        .name {
          flex: 1;
        }
      }
      .title {
        display: flex;
        align-items: center;
        width: 100%;
        .tagstyle {
          font-size: 20rpx;
          padding: 0 12rpx;
          height: 32rpx;
          margin-right: 10rpx;
        }
        .text-cut {
          color: #828282;
          font-size: 24rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .text-content {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        font-size: 24rpx;
        width: 100%;
        .text-gray {
          color: #828282;
          .dot {
            width: 12rpx;
            height: 12rpx;
            border-radius: 50%;
            background-color: #828282;
            margin-right: 4rpx;
            display: inline-block;
          }
        }
        .cu-btn {
          padding: 0 26rpx;
          font-size: 24rpx;
          height: 62rpx;
          border-radius: 1000rpx;
          position: relative;
          border: 0;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          line-height: 1;
          text-align: center;
          text-decoration: none;
          overflow: visible;
          margin-left: initial;
          -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
          margin-right: initial;
        }
      }
    }
    .cu-tag {
      margin-top: 8rpx;
      color: #666666;
      font-size: 26rpx;
      vertical-align: middle;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 16rpx;
      height: 48rpx;
      font-family: Helvetica Neue, Helvetica, sans-serif;
      white-space: nowrap;
      background-color: #f1f1f1;
      border-radius: 6rpx;
    }
    .coupon-sign {
      width: 114rpx;
      height: 114rpx;
      position: absolute;
      z-index: 99;
      top: -30rpx;
      right: 30rpx;
    }
  }
}
</style>
